<template>
  <div>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <h2>角色管理</h2>
        </div>
      </el-col>
    </el-row>

    <el-dialog
        :visible.sync="addRoleShow1"
        width="60%"
    >
      <AddRole :movie-id="addRoleId" v-if="addRoleShow2"
               ref="addRoleRef"></AddRole>
    </el-dialog>

    <el-dialog
        :visible.sync="findByIdShow1"
        width="60%"
    >
      <FindById :movie-id="findByIdId" v-if="findByIdShow2"
                ref="findByIdRef"></FindById>
    </el-dialog>

    <el-dialog
        :visible.sync="updateRoleShow1"
        width="60%"
    >
      <UpdataRole :movie-id="updateRoleId" v-if="updateRoleShow2"
                  ref="updateRoleRef"></UpdataRole>
    </el-dialog>

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-table
              :data="tableData"
              style="width: 100%"
              @current-change="handleCurrentChange">
            <el-table-column
                prop="roleName"
                label="角色名称"
            >
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple">
          <el-pagination
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="pageSize"
              :current-page="currentPage"
              @current-change="currentPageFn">
          </el-pagination>
        </div>
      </el-col>
    </el-row>

    <el-row style="margin-top: 50px;margin-left: 50px">
      <el-col :span="20">

        <el-button type="primary" plain style="margin-right: 20px" @click="addRole">添加新角色
        </el-button>


        <el-button type="primary" plain style="margin-right: 20px" @click="del">删除角色
        </el-button>


        <el-button type="primary" plain style="margin-right: 20px" @click="findById">查看角色权限
        </el-button>


        <el-button type="primary" plain style="margin-right: 20px" @click="updateRole">修改角色权限
        </el-button>

      </el-col>

    </el-row>
  </div>
</template>

<script>
import AddRole from "./addRole";
import FindById from "./findById";
import UpdataRole from "./updataRole";

export default {
  name: "roleManagement",
  components: {UpdataRole, AddRole, FindById},
  data() {
    return {
      updateRoleShow1:false,
      updateRoleShow2:false,
      updateRoleId:0,

      findByIdShow1: false,
      findByIdId: 0,
      findByIdShow2: false,


      addRoleShow1: false,
      addRoleId: 0,
      addRoleShow2: false,

      tableData: [],
      currentRow: '',
      total: 0,
      pageSize: 4,
      currentPage: 1,

      clientName: '',
      startDate: '',
      endDate: ''
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    currentPageFn(currentPage) {
      this.currentPage = currentPage
      this.init()
    },
    init() {
      let params = {
        current: this.currentPage,
        size: this.pageSize,
      }
      this.$axios.get('drp/role/findByAll', {params: params}).then(
          r => {
            console.log(r.data.records)
            this.tableData = r.data.records;
            this.total = r.data.total;
          }
      )
    },
    handleCurrentChange(val) {
      this.currentRow = val
      console.log(val)
    },
    addRole() {
      this.addRoleShow1 = true
      this.addRoleShow2 = true
    },
    del() {
      if (this.currentRow == '') {
        this.$message.warning("请选中一个角色")
        return
      }
      let formData = new FormData()
      formData.append("roleId", this.currentRow.roleId)
      this.$axios.post('drp/role/delRole', formData).then(
          r => {
            if (r.data == 'ok') {
              alert("删除成功")
              location.href = "/index"
            }
          }
      )
    },
    findById() {
      if (this.currentRow == '') {
        this.$message.warning("请选中一个角色")
        return
      }
      this.findByIdShow1 = true
      this.findByIdShow2 = true
      this.$nextTick(() => {
        this.$refs.findByIdRef.init(this.currentRow.roleId)
      })
    },
    updateRole(){
      if (this.currentRow == '') {
        this.$message.warning("请选中一个角色")
        return
      }
      this.updateRoleShow1=true
      this.updateRoleShow2=true
      console.log(this.currentRow.roleId)
      this.$nextTick(() => {
        this.$refs.updateRoleRef.init(this.currentRow.roleId)
      })
    }
  }
}
</script>

<style scoped>

</style>